<script setup lang='ts'>
import {nextTick, onMounted, reactive, ref} from 'vue';
import {numberApi, statisticsApi} from '@/api/controller';
  import { ToastWarning, Toastloading } from '@/utils/public';
  import { getPlayEndTime, getDateArray, getData, getSummaries } from '@/utils'
  import Pagination from "@/components/Pagination/index.vue";
  import xmDatePicker from '@/components/xmDatePicker/index.vue';
  import serachUserid from '@/components/serachUserid/index.vue';
import { useRouter } from "vue-router";
const $router = useRouter();
import updateMove from "./components/updateMove.vue";
import updateInvite from "./components/updateInvite.vue";
const updateMoveRef = ref(),
  updateInviteRef = ref();
const moreListRef = ref(),
userinfoRef = ref();
  const action = reactive({
    total:0,
    list:[] as any[],
    timeObj:getPlayEndTime(getDateArray('ymd')),
  })
  const listQuery = reactive({
    invite_user_id:'',
    invite_uuid:'',
    user_id:'',
    user_uuid:'',
    invite_nickname:'',
    invite_code:'',
    loginIp:'',
    page:1,
    limit:20,
  })
const handleFilter = () => {

  Object.assign(listQuery, {
    ...listQuery,
  });
  getList();
};
  const handleSerach = ()=>{
    listQuery.page = 1
    getList()
  }
  const exportFunc=()=>{
    listQuery.page = 1
    exportList()
  }
const handleuserInfo = (row = {}) => {
  userinfoRef.value.openDialog(row);
};
  const getList = async (query:any = {}) =>  {

    const { invite_user_id } = query
    const loading = Toastloading()
    const { playTime:date_st, endTime:date_ed } = action.timeObj
    const res = await statisticsApi.dayStatList({
      date_st,
      date_ed,
      ...listQuery
    })
    loading.close()
    const { data=[], total=0 } = res.data
    action.total = total
    if(invite_user_id) {
      const item = data.find((res:any)=>res.invite_user_id == invite_user_id)
      console.log(invite_user_id)
      handleuserInfo(item)
    }
    action.list = data
  }
const exportList = async () =>  {
  const { playTime:date_st, endTime:date_ed } = action.timeObj
  let p:any={
    date_st,
    date_ed,
    ...listQuery
  }

  const param= new URLSearchParams(p).toString()
  let url=import.meta.env.VITE_HTTP+"/dayStatListExport?"+param;
  window.open(url,"_blank")
}
  const opendrawer = (row:any={})=>{
    moreListRef.value.openDialog(row)
  }
const dialogMove = (row:any={})=> {
  updateMoveRef.value.openDialog(row);

};
  const dialogInvite = () => {
    updateInviteRef.value.openDialog();
};
</script>

<template  #default="scope">
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">被邀请用户UUID：</div>
          <serachUserid v-model:user_id="listQuery.invite_user_id" />
        </div>
        <div class="labelItem">
          <div class="label">被邀请用户昵称：</div>
          <el-input v-model="listQuery.invite_nickname" placeholder="请输入用户昵称" class="xm-ml10"  />
        </div>
        <div class="labelItem">
          <div class="label">邀请码：</div>
          <el-input v-model="listQuery.invite_code" placeholder="请输入邀请码" class="xm-ml10"  />
        </div>
        <div class="labelItem">
          <div class="label">ip查询：</div>
          <el-input v-model="listQuery.loginIp" placeholder="请输入ip" class="xm-ml10"  />
        </div>
        <xmDatePicker type="daterange" v-model:timeval="action.timeObj" />
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">查询</el-button>
          <el-button class="pointer" @click="dialogInvite">绑定</el-button>
          <el-button type="primary" @click="exportList">导出</el-button>
        </div>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      show-summary
      :data="action.list"
      border
      :summary-method="((param:any)=>getSummaries(param,[1,2,3]))">
      <el-table-column min-width="120" prop="invite_code" label="邀请人邀请码" />
      <el-table-column min-width="120" prop="user_uuid" label="邀请人UUID" />
      <el-table-column min-width="120" prop="user_nickname" label="邀请人昵称" />
      <el-table-column min-width="120" prop="invite_uuid" label="被邀请人UUID" />
      <el-table-column min-width="120" prop="invite_nickname" label="被邀请人昵称" />
      <el-table-column min-width="120" prop="reg_time" label="被邀请人注册时间" />
      <el-table-column min-width="120" prop="loginIp" label="被邀请人登录IP" />
      <el-table-column min-width="120" prop="chongzhiAll" label="被邀请人充值金额（元）" />
      <el-table-column min-width="120" prop="diamondAll" label="被邀请人消费流水（刷礼物钻石数）" />
      <el-table-column width="200" prop="invite_code" label="解绑">
        <template #default="scope">
          <!-- <el-tag class="pointer" @click="handleuserInfo(scope.row)">{{ scope.row.nickname }}</el-tag> -->
          <el-tag class="pointer" @click="dialogMove(scope.row)" prop="invite_code">{{ scope.row.invite_code }}解绑</el-tag>
        </template>
      </el-table-column>
<!--      <el-table-column fixed="right" label="操作" width="120">-->
<!--        <el-dropdown >-->

<!--          <template #default="scope">-->
<!--            <el-button class="pointer" @click="dialogMove(scope.row)" prop="invite_uuid" > 解绑</el-button>-->
<!--            <el-tag class="pointer" @click="dialogMove(scope.row)">{{ scope.row.invite_code }}解绑</el-tag>-->
<!--          </template>-->
<!--        </el-dropdown>-->

<!--        <el-dropdown  class="xm-mx10">-->
<!--          <template #default="scope">-->
<!--            <el-button class="pointer" @click="dialogInvite(scope.row)">绑定</el-button>-->
<!--          </template>-->
<!--        </el-dropdown>-->
<!--      </el-table-column>-->
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <updateInvite ref="updateInviteRef" @updateList="getList" />
    <updateMove ref="updateMoveRef" @updateList="getList" />
  </div>

</template>

<style lang="scss" scoped>
:deep(.xm-dialog) {
  .el-input {
    width: calc($inputWidth);
  }
}
</style>
